<template>
	<view class="index">
		<nav-bars backState="1000" :bgColor="background" fontColor="#000" title="装修新房"></nav-bars>
		<!-- 顶部搜索框 -->
		<view class="i_top">
			<view class="i_tCan">
				<view class="i_left" @click="gitmarkshow()">{{Marketnames.substring(0,2)}}<text
						class="iconfont icon-arrow-left-copy"></text></view>
				<view class="i_tInput">
					<view class="i_tiIcon iconfont icon-search"></view>
					<input type="text" confirm-type="search" @click="GoSearch" v-model="searchVal" @confirm="searchData"
						placeholder="搜索您感兴趣的家居" placeholder-class="col-ccc" />
				</view>
				<view class="i_tBtn">
					<!-- #ifndef MP-WEIXIN -->
					<view class="i_tbIcon" @click="gitchat()">
						<image src="@/static/home/kf.png"></image>
					</view>
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<view class="i_tbIcon" @click="gitchat()" v-if="!config_id && !config_url">
						<image src="@/static/home/kf.png"></image>
					</view>
					<view class="i_tbIcon" v-else @click="gitpouchatshow">
						<image src="@/static/home/kf.png"></image>
					</view>
					<!-- #endif -->
				</view>
			</view>
		</view>
		<view class="topimgs">
			<view class="im1" @click="goSkip('/pages_two/pages/construction/list/index')"><image src="https://manager.ryz1620.com/static/DIY/m1.png" mode="widthFix"></image></view>
			<view class="im1" @click="pageHome('/pages/home/index/list')"><image src="https://manager.ryz1620.com/static/DIY/m2.png" mode="widthFix"></image></view>
			<view class="im1" @click="goSkip('/pages_design/pages/design/index/index')"><image src="https://manager.ryz1620.com/static/DIY/m3.png" mode="widthFix"></image></view>
		</view>
		<!-- 案例推荐 -->
		<view class="livePlay">
			<view class="titlelive">热门案例</view>
			<view class="livePlayView">
				<view class="livePlayMain">
					<view class="livePlayItem" v-for="(item,index) in RecommendLisr" :key="index"
						@tap="toDetail(item.id)">
						<view class="livePlaybg">
							<image :src="item.thumb_url[0].path">
							</image>
							<view class="tips" style="">
								<view class="tips_icon" style="">
									<u-icon name="heart-fill" color="#fff" size="20"></u-icon>
									<text style="">推荐</text>
								</view>
							</view>
						</view>
						<view class="Main_view" style="">
							<view class="Main_title ellipsisText" style="">{{item.title}}</view>
							<view style="color: #D6A665;font-size: 22rpx;">
								#{{item.house_type}}
								<!-- <text style="">万</text> -->
							</view>
						</view>
					</view>
					<!-- <view class="last_item" style="">
						<view class="last_item_view" style="">
							<text class="look_more" style="">查看更多</text>
							<view >
								<u-icon  size="20" name="https://cos.ryz1620.com/liankun/static/goRight.png"></u-icon>
							</view>
						</view>
					</view> -->
				</view>
			</view>
		</view>
		 <view class="live">
			<view class="liveView" v-if="navBarTitle != '话题'">
				<view class="liveItem"  @click="GoLiveRoom(play.roomid)">
					<view class="livePic">
						<image :src="play.cover_img" mode="widthFix"></image>
						<view class="liveLook">
							<view class="liveLookIcon" v-if="play.live_status == 102 || play.live_status == 101 || play.live_status == 103">
								<image v-if="play.live_status == 102" :src="`${baseImg}/static/adminShop/liveyuyue.png`" mode=""></image>
								<image v-if="play.live_status == 101" :src="`${baseImg}/static/adminShop/livelook.png`" mode=""></image>
								<image v-if="play.close_replay == 0 && play.live_status==103" :src="`${baseImg}/static/adminShop/playBack.png`" mode=""></image>
								<image v-if="play.close_replay == 1 && play.live_status==103" :src="`${baseImg}/static/adminShop/livelook.png`" mode=""></image>
								
							</view>
							<view class="liveLookText">
								<text v-if="play.live_status == 102">预约中</text>
								<text v-if="play.live_status == 101">正在直播</text>
								<text v-if="play.close_replay == 0 && play.live_status==103">直播回放</text>
								<text v-if="play.close_replay == 1 && play.live_status==103">已结束</text>
							</view>
						</view>
						<view class="livetext">
							<view class="liveimg"><image :src="play.feeds_img"></image></view>
							<view class="elText">
								<view class="tcv1">{{ play.anchor_name}}</view>
								<view class="tcv2">{{ play.name}}</view>
							</view>
						</view>
						
					</view>
				</view>
			</view>
		</view>
		<!-- 热门推荐 -->
		<view class="P_View">
			<view class="titlelive">猜你喜欢</view>
			<view class="P_List">
				<view class="P_flex">
					<view class="P_item" v-for="item in demoList" :key="item.id" @tap="toDetail(item.id)">
						<view class="P_image">
							<image lazyLoad="true" :src="item.thumb_url[0].path"></image>
						</view>
						<view class="P_main">
							<view class="P_Title ellipsisText">{{item.title}}</view>
							<view class="P_Pirc4" style="color: #D6A665;font-size: 22rpx;">
								#{{ item.house_type }}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		
		<!-- 微信客服 -->
		<view class="pouchat" v-if="pouchatshow">
			<view class="poucont">
				<view class="chatlist">
					<view class="chatml" @click="gitwxchat()" v-if="config_url">
						<image src="https://manager.ryz1620.com/static/my/wxchat.png" mode="widthFix"></image>
						<text class="t1">在线微信客服</text>
						<text class="t2">可直接联系客服</text>
					</view>
					<view class="chatml" v-if="config_id">
						<cell class="cell-service" bind:startmessage="startmessage"
							bind:completemessage="completemessage" :plugid="config_id" />
						<image src="https://manager.ryz1620.com/static/my/codechat.png" mode="widthFix"></image>
						<text class="t1">添加微信客服</text>
						<text class="t2">扫微信二维码</text>
					</view>
				</view>
				<view class="iconfont icon-close" @click="wxCodeClick"></view>
			</view>
		</view>
		<!-- 选择卖场 -->
		<view class="maipou" v-if="Marketidshow">
			<view class="maicont">
				<view class="maitop">请选择卖场 <text class="iconfont icon-close" @click="gitmarkshow()"></text></view>
				<view class="contnam">
					<view class="itemmai" @click="gitMarketid(item)" :class="{active:Marketid==item.id}"
						v-for="(item,index) in Marketlist" :key="index">
						<image :src="`https://manager.ryz1620.com/static/my/dl${index+1}.png`"></image>
						<text>{{item.name}}</text>
					</view>
				</view>
				<view class="maibtn" @click="gitMarketchose()">进入卖场</view>
			</view>
		</view>
		<!-- 选择卖场 -->
		<view class="maipou" v-if="nowMarketshow">
			<view class="maicont">
				<view class="maitop" style="background: #fff; color: #000;">定位显示附近的卖场 <text class="iconfont icon-close"
						@click="gitmashow()"></text></view>
				<view class="contnam">
					<view class="itemsd active" @click="gitMarketchoses(item)" v-if="nowMarketid==item.id"
						v-for="(item,index) in Marketlist" :key="index">
						<text>切换{{item.name}}</text>
					</view>
					<view class="itemsd" @click="gitMarketchoses(item)" v-if="nowMarketid!=item.id"
						v-for="(item,index) in Marketlist" :key="index">
						<text>浏览{{item.name}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
    import service_design from '@/service/design';
    import service_mall from '@/service/mall.js';
	import service_recommend from '@/service/recommend.js'
	import service_player from '@/service/player.js';
	export default {
		components: {
			// #ifdef MP-WEIXIN
			cell: 'plugin://contactPlugin/cell'
			// #endif
		},
		data() {
			return {
				config_id: '',
				config_url: '',
				pouchatshow: false,
				baseImg: this.$static,
				Marketlist: [],
				Marketid: '',
				Marketname: '',
				Marketnames: '',
				Marketidshow: false,
				latitude: '',
				longitude: '',
				nowMarketid: '',
				nowMarketshow: false,
				RecommendLisr: [],
				homeProductlist: [], //好物推荐
				navBarTitle: '话题',
				play:'',
				goodsList:[],
				demoList: [],
				currentPage:1,
			}
		},
		onShareAppMessage(res) {
			if (res.from === 'button') {}
			return {
				title: '融易装',
				path: '/pages/home/index/index2',
				success: function(res) {
					console.log('成功', res);
				}
			};
		},
		onShareTimeline(res) {
			if (res.from === 'menu') {}
			return {
				title: '融易装',
				path: '/pages/home/index/index2',
				success: function(res) {
					console.log('成功', res);
				}
			};
		},
		onReady() {
			var value = uni.getStorageSync('LiveConfig');
			this.navBarTitle = value != '' ? value : '话题';
		},
		onShow() {
			var value = uni.getStorageSync('LiveConfig');
			this.navBarTitle = value != '' ? value : '话题';
		},
		onLoad(params) {
			this.gitMarket()
			this.Marketnames = uni.getStorageSync('Marketname') || '桂林'
			this.Marketid = uni.getStorageSync('Marketid') || ''
			let lng = uni.getStorageSync('location_longitude')
			if (lng) {
				this.latitude = uni.getStorageSync('location_latitude')
				this.longitude = uni.getStorageSync('location_longitude')
			} else {
				this.getlng()
			}
			this.$utils.getUrl();
			this.gitConfig();
			this.gitwxConfig();
			let token = uni.getStorageSync('token');
			// #ifdef MP-WEIXIN
			if (token) {
				this.$utils.gitsetting();
			}
			// #endif
			if (params.share_uid) {
				let shareuId = params.share_uid;
				this.$store.commit('index/SET_shareuId', shareuId);
				if (token && shareuId) {
					service_mall
						.getPromoter({
							share_uid: shareuId
						})
						.then(res => {});
				}
			}
			// #ifdef MP-WEIXIN
			gio('getLocation');
			gio('setPage', {
				pageName: '融易装'
			});
			// #endif
			this.getRecommend()
			this.tuishop()//好物推荐
			this.getLvieList()
			this.getList()
			this.userId = uni.getStorageSync('userId');
		},
		onReachBottom() {
			this.currentPage++
			let params = {
				page: this.currentPage,
				pagesize: 14,
			}
			service_design.getDemoList(params)
				.then(res => {
					if (res.code == 1) {
						let data = res.data
						// 处理数据
						for (let i = 0; i < data.length; i++) {
							this.demoList.push(data[i])
						}
					}
				})
		},
		methods:{
			getRecommend() {
				// RecommendLisr:[],
				// RecommendType:0,
				// 
				service_recommend.getRecommendCase({
						type: 1
					})
					.then(res => {
						if (res.code == 1) {
							var dataList = res.data
							this.RecommendLisr = dataList
						}
					})
			},
			toDetail(caseId) {
				uni.navigateTo({
					url: '/pages_design/pages/design/demo/demo?caseId=' + caseId
				})
			},
			navTo(url) {
				uni.navigateTo({
					url
				});
			},
			pageHome(url){
				uni.setStorageSync('entry',1);
				uni.switchTab({
					url: url
				});
			},
			goSkip(url){
				uni.navigateTo({
					url: url
				});
			},
			// 获取数据列表
			getList() {
				let params = {
					page: this.currentPage,
					pagesize: 14,
				}
				service_design.getDemoList(params)
					.then(res => {
						if (res.code == 1) {
							let data = res.data
								this.demoList = data
							// 处理数据
							// for (let i = 0; i < data.length; i++) {
							// 	this.demoList.push(data[i])
							// }
						}
					})
			},
			// 获取视频列表
			getLvieList() {
				var that = this;
				let params = {
					page: 1,
					pagesize: 1,
					is_push:1,
				};
				service_player
					.getXcxLiveList(params)
					.then(res => {
						if (res.code == 1) {
							let data = res.data.wxLivePlayers;
							// console.log(data);
							that.play = data[0];
						} else {
							that.play = '';
							this.$utils.showErr({
								title: res.msg
							});
						}
					})
					.catch(err => {
						this.$utils.showErr({
							title: err
						});
					});
			},
			GoLiveRoom(id) {
				var that = this;
				let token = uni.getStorageSync('token');
				if (!token) {
					uni.showModal({
						title: '提示！',
						content: '请先登录！',
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages_login/pages/login/login/index'
								});
							} else if (res.cancel) {
							}
						}
					});
				} else {
					uni.navigateTo({
						url: '/pages/livePlayer/index/index?id='+id
					});
				}
			},
			// 推荐商品
			tuishop() {
				service_mall.index_gethomeProduct({}).then(res => {
					if (res.code == 1) {
						this.homeProductlist = res.data;
					}
				});
			},
			// 获取企业微信callme配置
			gitConfig() {
				service_mall
					.getCallMeConfig({
						partner_type: 'root',
						partner_id: 1
					})
					.then(res => {
						if (res.code == 1) {
							this.config_id = res.data.config_id;
						}
					});
			},
			getlng() {
				let that = this
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						that.latitude = res.latitude
						that.longitude = res.longitude
						uni.setStorageSync('location_longitude', res.longitude);
						uni.setStorageSync('location_latitude', res.latitude);
						let temp = []
						for (let i = 0, l = that.Marketlist.length; i < l; i++) {
							const element = that.Marketlist[i]
							let d = that.distance(
								element.lat,
								element.long,
								res.latitude,
								res.longitude
							)
							temp.push({
								num: d,
								id: element.id,
								name: element.name,
							})
						}
						// 最小距离
						let s = Math.min.apply(Math, temp.map(item => {
							return item.num
						}))
						let list = temp.find(val => val.num == s)
						console.log(s)
						that.nowMarketid = list.id
						that.nowMarketshow = true
					}
				});
			},
			// 获取卖场信息
			gitMarket() {
				service_mall.Market({}).then(res => {
					if (res.code == 1) {
						this.Marketlist = res.data
					}
				});
			},
			gitmarkshow() {
				this.Marketidshow = !this.Marketidshow
			},
			gitMarketid(item) {
				this.Marketid = item.id
				this.Marketname = item.name
				uni.setStorageSync('Marketid', this.Marketid);
				uni.setStorageSync('Marketname', this.Marketname);
			},
			gitMarketchose() {
				this.Marketidshow = false
				uni.reLaunch({
					url: "/pages/home/index/index"
				})
			},
			gitmashow() {
				this.Marketidshow = false
			},
			gitMarketchoses(item) {
				this.Marketid = item.id
				this.Marketname = item.name
				uni.setStorageSync('Marketid', item.id);
				uni.setStorageSync('Marketname', item.name);
				this.nowMarketshow = false
				uni.reLaunch({
					url: "/pages/home/index/index"
				})
			},
			// 两点间距离
			distance(la1, lo1, la2, lo2) {
				var La1 = (la1 * Math.PI) / 180.0
				var La2 = (la2 * Math.PI) / 180.0
				var La3 = La1 - La2
				var Lb3 = (lo1 * Math.PI) / 180.0 - (lo2 * Math.PI) / 180.0
				var s =
					2 *
					Math.asin(
						Math.sqrt(
							Math.pow(Math.sin(La3 / 2), 2) +
							Math.cos(La1) * Math.cos(La2) * Math.pow(Math.sin(Lb3 / 2), 2)
						)
					)
				s = s * 6378.137 //地球半径
				s = Math.round(s * 10000) / 10000
				return s
			},
			gitwxConfig() {
				service_mall
					.getwxMeConfig({
						partner_type: 'root',
						partner_id: 1
					})
					.then(res => {
						if (res.code == 1) {
							this.config_url = res.data.url;
						}
					});
			},
			gitpouchatshow() {
				this.pouchatshow = true;
			},
			wxCodeClick() {
				this.pouchatshow = false;
			},
			gitwxchat() {
				wx.openCustomerServiceChat({
					extInfo: {
						url: this.config_url
					},
					corpId: this.$env.CORPID,
					success(res) {}
				});
			},
			// 客服
			gitchat() {
				uni.showToast({
					title: '哎呀!不好意思，暂未配置客服...',
					icon: 'none',
					duration: 2000
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #f8f8f8;
	}
	
	.demo-layout {
		height: 80rpx;
		border-radius: 8rpx;
	}
	
	.bg-purple {
		background: #d3dce6;
	}
	
	.bg-purple-light {
		background: #e5e9f2;
	}
	
	.bg-purple-dark {
		background: #99a9bf;
	}
	
	.ellipsisTextOne {
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}
	
	.ellipsisText {
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}
	
	.swiper-wrapper {
		display: flex;
		align-items: center;
	
		.wrapper {
			padding-bottom: 10rpx;
			font-size: 28rpx;
			font-weight: 400;
			line-height: 40rpx;
			color: #333333;
			margin-right: 40rpx;
		}
	
		.swiper-slide-active {
			font-size: 36rpx;
			font-weight: 600;
			line-height: 50rpx;
			color: #333333;
			position: relative;
			padding-bottom: 15rpx;
		}
	
		.swiper-slide-active::before {
			content: '';
			width: 52rpx;
			height: 8rpx;
			background: #c3ab7c;
			box-shadow: 0rpx 6rpx 8rpx rgba(195, 171, 124, 0.49);
			opacity: 1;
			border-radius: 6rpx;
			position: absolute;
			left: 50%;
			transform: translate(-50%, 0%);
			bottom: 10rpx;
		}
	}
	
	.index {
	
		// 顶部搜索框
		.i_top {
			margin-top: 20rpx;
			padding-left: 130rpx;
			padding-right: 120rpx;
			position: relative;
	
			.i_left {
				line-height: 72rpx;
				position: absolute;
				left: 30rpx;
				top: 0;
			}
	
			.i_tCan {
				width: 100%;
			}
	
			.i_tBtn {
				width: 100rpx;
				display: flex;
				flex-flow: column;
				justify-content: center;
				align-items: center;
				position: absolute;
				right: 10rpx;
				top: 0;
			}
	
			.i_tbIcon {
				width: 72rpx;
				height: 72rpx;
				padding-top: 15%;
				padding-left: 15%;
				position: relative;
	
				.cell-service {
					position: absolute;
					right: 0;
					bottom: 0;
					left: 0;
					top: 0;
					opacity: 0;
					z-index: 10;
	
					.cell--bubble {
						width: 100%;
					}
				}
	
				image {
					width: 80%;
					height: 80%;
				}
			}
	
			.i_tbTxt {
				height: 28rpx;
				line-height: 28rpx;
				font-size: 20rpx;
				margin-top: 4rpx;
			}
	
			.i_tInput {
				height: 72rpx;
				border-radius: 36rpx;
				background: #ededed;
				position: relative;
				overflow: hidden;
	
				.col-ccc {
					color: #999999;
					font-size: 24rpx;
				}
	
				&>input {
					width: 100%;
					height: 100%;
					font-size: 24rpx;
					padding: 0 24rpx 0 72rpx;
				}
			}
	
			.i_tiIcon {
				width: 32rpx;
				height: 32rpx;
				line-height: 32rpx;
				color: #ccc;
				font-size: 32rpx;
				margin-top: -16rpx;
				position: absolute;
				top: 50%;
				left: 28rpx;
			}
		}
	
		// 功能
		.i_fun {
			margin-top: 20rpx;
			border-radius: 8rpx 8rpx 0 0;
			background: #fff;
			padding: 32rpx 0 10rpx 0;
	        margin-left: 32rpx;
			position: relative;
	        margin-right: 32rpx;
			.IconList {
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				justify-content: space-between;
			}
	
			.i_fItem {
				display: flex;
				// float: left;
				align-items: center;
				flex-direction: column;
				justify-content: center;
				// width: 25%;
				margin-bottom: 32rpx;
			}
	
			.i_fIcon {
				width: 70rpx;
				height: 70rpx;
			}
	
			.i_fTxt {
				font-size: 24rpx;
				margin-top: 14rpx;
			}
	
			.i_tDots {
				width: 100%;
				position: absolute;
				bottom: 8rpx;
				left: 0;
				display: flex;
				justify-content: center;
			}
	
			.i_tDot {
				width: 60rpx;
				height: 10rpx;
	
				&.active .i_tIcon {
					background: #ffd425;
				}
	
				.i_tIcon {
					width: 40rpx;
					height: 5rpx;
					margin: auto;
					background: rgba(0, 0, 0, 0.3);
				}
			}
	
			.iconLists {
				width: 100%;
				height: 160rpx !important;
			}
	
			.iconList_two {
				width: 100%;
				height: 280rpx !important;
			}
		}
	
		// banner
		.i_banner {
			height: 232rpx;
			margin: 24rpx 32rpx 0;
			border-radius: 10rpx;
			background: #f6f7fb;
	
			.i_bItem {
				width: 100%;
				height: 100%;
				padding-left: 30rpx;
				position: relative;
				overflow: hidden;
			}
	
			.i_bImg {
				width: 196rpx;
				height: 196rpx;
				border-radius: 8rpx;
				position: absolute;
				top: 16rpx;
				right: 28rpx;
				overflow: hidden;
			}
	
			.i_bTit {
				height: 44rpx;
				line-height: 44rpx;
				font-size: 32rpx;
				font-weight: bold;
				margin-top: 30rpx;
			}
	
			.i_bTxt {
				height: 28rpx;
				line-height: 28rpx;
				font-size: 20rpx;
				margin-top: 12rpx;
			}
	
			.i_bBtn {
				width: 160rpx;
				height: 64rpx;
				line-height: 64rpx;
				text-align: center;
				color: #fff;
				margin-top: 30rpx;
				border-radius: 8rpx;
				background: #030303;
	
				&:active {
					opacity: 0.88;
				}
			}
		}
	
		// 3d体验馆banner
		.learn_View {
			margin: 24rpx 32rpx 24rpx 32rpx;
	
			.learn_item {
				display: flex;
				align-items: center;
				justify-content: space-between;
	
				.learn_left {
					width: 392rpx;
					height: 252rpx;
					background: #f6fcfe;
					border-radius: 8rpx;
					padding: 20rpx 16rpx 24rpx 16rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					position: relative;
	
					.learn_left_title {
						font-size: 32rpx;
						font-weight: 600;
						line-height: 44rpx;
						color: #333333;
						margin-bottom: 6rpx;
					}
	
					.learn_left_des {
						font-size: 20rpx;
						font-weight: 400;
						line-height: 36rpx;
						color: #939393;
					}
	
					.learn_left_buttom {
						width: 134rpx;
						height: 56rpx;
						background: #333333;
						border-radius: 8rpx;
						line-height: 56rpx;
						font-size: 20rpx;
						font-weight: 400;
						color: #ffffff;
						text-align: center;
						margin-left: 8rpx;
					}
	
					.learn_left_img {
						width: 282rpx;
						height: 220rpx;
						position: absolute;
						bottom: -18rpx;
						right: -28rpx;
					}
				}
	
				.learn_right {
					.learn_right_top {
						width: 284rpx;
						height: 120rpx;
						background: #effbed;
						border-radius: 8rpx;
						margin-bottom: 12rpx;
						display: flex;
						align-items: flex-start;
						padding: 20rpx 0rpx 0rpx 24rpx;
					}
	
					.learn_right_title {
						font-size: 28rpx;
						font-weight: 600;
						line-height: 40rpx;
						color: #333333;
						margin-bottom: 8rpx;
					}
	
					.learn_right_des {
						font-size: 20rpx;
						font-weight: 400;
						line-height: 28rpx;
						color: #939393;
					}
	
					.learn_right_image {
						width: 84rpx;
						height: 90rpx;
					}
	
					.learn_right_bottom {
						width: 284rpx;
						height: 120rpx;
						background: #eff4ff;
						border-radius: 8rpx;
						display: flex;
						align-items: flex-start;
						padding: 20rpx 0rpx 0rpx 24rpx;
					}
				}
			}
		}
	
		// 推荐产品
		.i_recomd {
			background: #fff;
	
			.TitleView {
				display: flex;
				align-items: center;
				padding: 24rpx 32rpx 24rpx 40rpx;
				justify-content: space-between;
			}
	
			.i_tOper {
				color: #939393;
	
				.i_toIcon {
					color: #939393;
					font-size: 24rpx;
					display: flex;
					align-items: center;
				}
			}
	
			.i_rTitle {
				font-size: 36rpx;
				font-weight: 600;
				color: #333333;
	
				text .subtitle {}
			}
	
			.recomdDes {
				margin-bottom: 24rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #939393;
				padding: 0rpx 32rpx 0rpx 40rpx;
			}
	
			.i_rCan {
				height: 332rpx;
				overflow: hidden;
			}
	
			.i_rList {
				height: 400rpx;
				padding: 0 28rpx;
				white-space: nowrap;
				overflow-x: auto;
			}
	
			.i_rItem {
				width: 276rpx;
				margin-right: 32rpx;
				display: inline-block;
	
				&:nth-last-child(1) {
					margin-right: 0;
				}
			}
	
			.i_rImage {
				width: 100%;
				height: 224rpx;
				border-radius: 8rpx;
				background: #f6f7fb;
				position: relative;
				overflow: hidden;
			}
	
			.i_rTag {
				height: 40rpx;
				line-height: 40rpx;
				color: #fff;
				font-size: 20rpx;
				padding: 0 20rpx;
				border-radius: 30rpx;
				background: #030303;
				position: absolute;
				top: 16rpx;
				left: 16rpx;
			}
	
			.i_rText {
				width: 300rpx;
				height: 34rpx;
				line-height: 34rpx;
				font-size: 24rpx;
				font-weight: bold;
				margin-top: 16rpx;
			}
	
			.i_rFee {
				height: 34rpx;
				line-height: 34rpx;
				font-size: 16rpx;
				margin-top: 8rpx;
			}
		}
	
		// 3D体验
		.i_three {
			margin-top: 14rpx;
			// background: #fff;
			margin-top: 14rpx;
			padding-bottom: 24rpx;
	
			.TitleView {
				display: flex;
				align-items: center;
				padding: 24rpx 32rpx 4rpx 40rpx;
				justify-content: space-between;
			}
	
			.i_tOper {
				color: #939393;
	
				.i_toIcon {
					color: #939393;
					font-size: 24rpx;
					display: flex;
					align-items: center;
				}
			}
	
			.i_rTitle {
				font-size: 36rpx;
				font-weight: 600;
				color: #333333;
			}
	
			.recomdDes {
				margin-bottom: 24rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #939393;
				padding: 0rpx 32rpx 0rpx 40rpx;
			}
	
			.i_dRemark {
				font-size: 20rpx;
				font-weight: normal;
				padding-left: 24rpx;
			}
	
			.i_tSwiper {
				height: 240rpx;
				position: relative;
			}
	
			.i_tDots {
				width: 100%;
				position: absolute;
				bottom: 8rpx;
				left: 0;
				display: flex;
				justify-content: center;
			}
	
			.i_tDot {
				width: 24rpx;
				height: 36rpx;
	
				&.active .i_tIcon {
					background: #ffd425;
				}
	
				.i_tIcon {
					width: 12rpx;
					height: 12rpx;
					margin: 12rpx auto 0;
					border-radius: 50%;
					background: rgba(255, 255, 255, 0.5);
				}
			}
	
			.i_tCont {
				height: 100%;
				margin: 0 32rpx;
				border-radius: 10rpx;
				background: #f6f7fb;
				position: relative;
				overflow: hidden;
			}
	
			.i_tBtn {
				width: 102rpx;
				height: 102rpx;
				background: rgba(0, 0, 0, 0.4);
				border: 1px solid #fff;
				border-radius: 50%;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
	
			.i_tbImg {
				width: 42rpx;
				height: 42rpx;
				margin: 20rpx auto 0;
			}
	
			.i_tbTxt {
				width: 100%;
				height: 34rpx;
				line-height: 34rpx;
				text-align: center;
				color: #fff;
				font-size: 24rpx;
				position: absolute;
				top: 58rpx;
				left: 0;
			}
		}
	
		// 商品推荐
		.P_View {
	        .titlelive{
	        	font-size: 32rpx;
	        	color: #333;
	        	padding: 24rpx 30rpx;
	        }
			.P_List {
				padding: 0 32rpx;
	
				.P_flex {
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					justify-content: space-between;
	
					.P_item {
						margin-bottom: 24rpx;
						box-shadow: 0rpx 0rpx 16rpx rgba(0, 0, 0, 0.06);
						border-radius: 15rpx;
						overflow: hidden;
						width: 332rpx;
	
						.P_image {
							height: 334rpx;
							width: 332rpx;
						}
	
						.P_main {
							padding: 20rpx;
	
							.P_Title {
								font-size: 24rpx;
								font-weight: 400;
								line-height: 36rpx;
								color: #333333;
							}
	
							.P_Pirce {
								font-size: 28rpx;
								font-weight: 600;
								line-height: 44rpx;
								color: #333333;
	
								.P_money {
									font-size: 20rpx;
									font-weight: 400;
									line-height: 36rpx;
									color: #0d1019;
									margin-left: 4rpx;
								}
							}
						}
					}
	
					.P_buttom {
						width: 100%;
						height: 88rpx;
						background: #f8f8f8;
						border-radius: 4rpx;
						font-size: 28rpx;
						font-weight: 600;
						line-height: 88rpx;
						color: #333333;
						text-align: center;
						margin-bottom: 24rpx;
					}
				}
			}
		}
	
		// 内容
		.i_content {
			.i_cLine {
				height: 16rpx;
				background: #f6f7fb;
			}
	
			.i_cContain {
				width: 100vw;
				height: 100vh;
				display: flex;
				flex-flow: column;
				position: relative;
			}
	
			.i_cTabs {
				height: 112rpx;
				background: #fff;
				position: relative;
				position: sticky;
				top: 0;
				z-index: 10;
			}
	
			.i_cAdd {
				width: 104rpx;
				height: 104rpx;
				margin-top: 8rpx;
				position: absolute;
				top: 0;
				right: 0;
				display: flex;
				justify-content: center;
				align-items: center;
	
				&>image {
					width: 40rpx;
					height: 40rpx;
				}
			}
	
			.i_cTab {
				height: 112rpx;
				line-height: 122rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #6c6c6c;
				padding: 0 32rpx;
				position: relative;
				display: inline-block;
	
				&.active {
					color: #333;
					font-size: 36rpx;
					font-weight: 600;
					color: #333333;
				}
	
				&.active .i_cTab-txt::after {
					content: '';
					background-color: #c3ab7c;
					width: 52rpx;
					height: 8rpx;
					position: absolute;
					bottom: 19rpx;
					left: 50%;
					border-radius: 6rpx;
					transform: translate(-50%, 0%);
					z-index: 1;
				}
	
				.i_cTab-txt {
					height: 100%;
					position: relative;
	
					&>text {
						position: relative;
						z-index: 2;
					}
				}
			}
	
			.i_cSwiper {
				flex: 1;
				overflow: hidden;
			}
	
			.i_cScroll {
				height: 100%;
			}
	
			.i_cList {
				padding: 0 32rpx;
				display: flex;
			}
	
			.i_cLeft {
				flex: 1;
			}
	
			.i_cLeft:first-child {
				padding-right: 12rpx;
			}
	
			.i_cLeft:last-child {
				padding-left: 12rpx;
			}
	
			.i_cRight {
				flex: 1;
			}
	
			.i_cItem {
				width: 100%;
				border-radius: 8rpx;
				overflow: hidden;
				box-shadow: 0rpx 0rpx 16rpx rgba(0, 0, 0, 0.06);
				margin-bottom: 24rpx;
				padding-bottom: 20rpx;
			}
	
			.i_cImage {
				width: 100%;
				background: #f6f7fb;
				height: 360rpx;
				overflow: hidden;
	
				>image {
					min-height: 360rpx;
				}
			}
	
			.i_cTag {
				height: 44rpx;
				line-height: 44rpx;
				color: #a58f6d;
				font-size: 20rpx;
				padding: 0 16rpx 0 48rpx;
				margin: 16rpx 16rpx 0;
				border-radius: 22rpx;
				background: #f9f6f3;
				position: relative;
				display: inline-block;
				overflow: hidden;
	
				.i_ctIcon {
					width: 36rpx;
					height: 36rpx;
					position: absolute;
					top: 4rpx;
					left: 4rpx;
				}
			}
	
			.i_cText {
				line-height: 36rpx;
				font-size: 24rpx;
				margin: 16rpx 20rpx 0;
			}
	
			.i_cUser {
				margin: 16rpx 16rpx 0;
			}
	
			.i_cHead {
				width: 36rpx;
				height: 36rpx;
				margin-right: 8rpx;
				border-radius: 50%;
				background: #f6f7fb;
				float: left;
				overflow: hidden;
			}
	
			.i_cPraise {
				height: 36rpx;
				color: #939393;
				font-size: 20rpx;
				float: right;
				display: flex;
				align-items: center;
			}
	
			.i_cpIcon {
				width: 32rpx;
				height: 32rpx;
				margin: 0 8rpx;
			}
	
			.i_cName {
				height: 36rpx;
				line-height: 36rpx;
				color: #939393;
				font-size: 20rpx;
				overflow: hidden;
			}
		}
	}
	
	.inbeijing {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		bottom: 0;
		background: rgba(0, 0, 0, 0.25);
	}
	
	// 行业资讯
	.information {
		width: 100%;
		margin: 20rpx auto;
		background: #ffffff;
		opacity: 1;
	
		// border-radius: 16rpx;
		// padding: 32rpx 24rpx 28rpx 28rpx;
		.TitleView {
			display: flex;
			align-items: center;
			padding: 24rpx 32rpx 24rpx 40rpx;
			justify-content: space-between;
	
			.i_tOper {
				color: #939393;
	
				.i_toIcon {
					color: #939393;
					font-size: 24rpx;
					display: flex;
					align-items: center;
				}
			}
	
			.i_rTitle {
				font-size: 36rpx;
				font-weight: 600;
				color: #333333;
			}
		}
	
		// .sub-title {
		// 	display: flex;
		// 	padding: 0 12rpx;
		// 	justify-content: space-between;
		// 	text {
		// 		font-size: 32rpx;
		// 		font-family: PingFang SC;
		// 		font-weight: 600;
		// 		line-height: 32rpx;
		// 		color: #0a0605;
		// 	}
		// 	image {
		// 		width: 52rpx;
		// 		height: 52rpx;
		// 	}
		// }
		.list {
			display: flex;
			justify-content: space-between;
			border-bottom: 1rpx solid #f5f5f5;
			padding: 24rpx 32rpx;
	
			&:last-child {
				border-bottom: 0;
			}
	
			.list-left {
				.des {
					width: 356rpx;
					height: 128rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 44rpx;
					color: #0a0605;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 3;
					overflow: hidden;
				}
	
				.time {
					padding-top: 28rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 300;
					line-height: 24rpx;
				}
			}
	
			.info-img {
				width: 250rpx;
				height: 190rpx;
				border-radius: 8rpx;
			}
		}
	}
	
	// 浮窗按钮=====
	.s_fixed {
		position: fixed;
		right: 32rpx;
		bottom: 12%;
		z-index: 53;
	}
	
	.s_fixed .s_fBtn {
		width: 108rpx;
		height: 108rpx;
		margin-top: 22rpx;
		border-radius: 50%;
		background: #fff;
		box-shadow: 0 0 20rpx #dedede;
		position: relative;
	
		&:active {
			opacity: 0.92;
		}
	}
	
	.s_fixed .s_fcIcon {
		width: 40rpx;
		height: 40rpx;
		padding-top: 18rpx;
		margin: 0 auto;
		box-sizing: content-box;
	}
	
	.s_fcNum {
		height: 32rpx;
		line-height: 32rpx;
		color: #fff;
		font-size: 24rpx;
		padding: 0 10rpx;
		border-radius: 16rpx;
		background: #e5675a;
		position: absolute;
		top: 0;
		right: 0;
	}
	
	.s_fixed .s_fcTxt {
		height: 34rpx;
		line-height: 34rpx;
		text-align: center;
		font-size: 24rpx;
	}
	
	.yopcom {
		display: flex;
		text-align: center;
		font-size: 20rpx;
		margin: 0 32rpx;
		background: #fff;
		border-radius: 0 0 8pxrpx 8pxrpx;
		border-top: 1px #f6f7fb solid;
		line-height: 66rpx;
	
		.i_com {
			flex: 1;
	
			text {
				padding-left: 35rpx;
				color: #545456;
			}
	
			text.k1 {
				background: url(@/static/home/k1.png) no-repeat left center;
				background-size: 30rpx;
			}
	
			text.k2 {
				background: url(@/static/home/k2.png) no-repeat left center;
				background-size: 30rpx;
			}
	
			text.k3 {
				background: url(@/static/home/k3.png) no-repeat left center;
				background-size: 30rpx;
			}
		}
	}
	
	.bannerpop {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.2);
		z-index: 9999;
	
		.bannercont {
			width: 80%;
			position: absolute;
			left: 10%;
			top: 25%;
	
			.bannername {
				image {
					width: 100%;
					border-radius: 20rpx;
				}
			}
	
			.icon-close {
				display: block;
				font-size: 60rpx;
				color: #fff;
				text-align: center;
				margin: 30rpx auto;
			}
	
			.redMoney {
				position: absolute;
				margin-top: 186rpx;
				z-index: 200;
				font-size: 84rpx;
				left: 50%;
				transform: translate(-50%, 0);
				font-weight: bold;
				color: #eb4638;
	
				text {
					margin-left: 8rpx;
					font-size: 48rpx;
				}
			}
	
			.receiveBtn {
				position: absolute;
				margin-top: -108rpx;
				width: 264rpx;
				height: 58rpx;
				left: 50%;
				text-align: center;
				line-height: 58rpx;
				font-weight: bold;
				color: #cd312c;
				transform: translate(-50%, 0);
				background: linear-gradient(180deg, #fcc47b, rgba(253, 229, 184, 0.99));
				box-shadow: 0px 11px 38px 0px rgba(159, 11, 0, 0.23), 0px -4px 16px 0px rgba(255, 228, 201, 0.31);
				border-radius: 27rpx;
			}
		}
	}
	
	.giftPop {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.2);
		z-index: 9999;
	
		.bannercont {
			width: 80%;
			height: 860rpx;
			position: absolute;
			left: 10%;
			top: 20%;
			background: linear-gradient(156deg, #f1d9a4, #e3b26b);
			border-radius: 20px;
	
			.giftBagImg {
				position: absolute;
				left: 50%;
				top: -8%;
				transform: translate(-50%, -50%);
				width: 520rpx;
				height: 264rpx;
			}
	
			.in-frame {
				display: flex;
				align-items: center;
				width: 100%;
				height: 100%;
	
				.frame-box {
					width: 93.44%;
					height: 95.59%;
					margin: auto;
					padding: 20rpx;
					background: #fef4de;
					box-shadow: 0px 2px 14px 0px rgba(237, 207, 150, 0.8);
					border-radius: 20rpx;
	
					.column-title {
						margin-top: 55rpx;
						color: #5c3d06;
						text-align: center;
						font-weight: 500;
	
						text {
							font-size: 38rpx;
							display: block;
							font-weight: bold;
							line-height: 80rpx;
						}
					}
	
					.row-item {
						width: 490rpx;
						height: 148rpx;
						margin: auto;
						margin-bottom: 20rpx;
						background: #fffbf6;
						box-shadow: 0px 2px 6px 0px #f5eee0;
						border-radius: 10rpx;
						display: flex;
						align-items: center;
						justify-content: space-around;
	
						.sidebar_a {
							width: 36%;
							font-size: 42rpx;
	
							text {
								font-weight: bold;
								color: #e94b1a;
							}
	
							image {
								width: 150rpx;
								height: 150rpx;
								border-radius: 50%;
								margin: auto;
							}
						}
	
						.sidebar_b {
							font-size: 28rpx;
							color: #b97839;
							font-weight: bold;
							line-height: 40rpx;
	
							text {
								display: block;
								text-overflow: ellipsis;
								overflow: hidden;
								white-space: nowrap;
							}
	
							text.time {
								font-size: 24rpx;
								color: #9b8e77;
							}
						}
					}
	
					.libaoBtn {
						width: 440rpx;
						height: 80rpx;
						margin: 40rpx auto;
						background: linear-gradient(180deg, #f6dda5, #ebbc79);
						border-radius: 40rpx;
						text-align: center;
						color: #5c3d06;
						font-weight: bold;
						line-height: 80rpx;
					}
				}
			}
	
			.icon-close {
				display: block;
				font-size: 60rpx;
				color: #fff;
				text-align: center;
				margin: 48rpx auto;
			}
		}
	}
	
	.luck-draw {
		position: fixed;
		right: 0;
		bottom: 25.29%;
	
		.icon-close {
			font-size: 50rpx;
			color: #000;
			text-align: center;
			margin: 10rpx auto;
		}
	
		.luck-draw-img {
			width: 232rpx;
			height: 206rpx;
		}
	
		.luck-draw-close {
			width: 90rpx;
			height: 90rpx;
			margin: auto;
		}
	}
	
	.homeimgduobao {
		padding: 0 30rpx;
		margin-top: 10rpx;
	
		image {
			height: 180rpx;
			width: 100%;
		}
	}
	
	.homeimg {
		padding: 0 30rpx;
		margin-top: 10rpx;
	
		image {
			height: 170rpx;
			width: 100%;
		}
	}
	
	.list {
		display: flex;
		padding: 0 20rpx 0rpx;
	}
	
	.side-line {
		width: 50%;
	}
	
	.card {
		font-size: 30rpx;
		margin: 20rpx 10rpx;
		border-radius: 10rpx;
		background-color: #fff;
		box-shadow: 0rpx 0rpx 16rpx rgba(0, 0, 0, 0.06);
	}
	
	.name {
		font-size: 28rpx;
		line-height: 35rpx;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}
	
	.price {
		color: red;
		font-size: 32rpx;
		font-weight: 700;
		padding: 12rpx 0;
	}
	
	.card>image {
		width: 100%;
		flex-shrink: 0;
		background-color: #f6f6f6;
		border-radius: 10rpx 10rpx 0 0;
		height: 345rpx !important;
		vertical-align: middle;
		max-width: 480rpx;
	}
	
	.card-right {
		padding: 20rpx 0;
		padding-bottom: 0;
		min-width: 300rpx;
		position: relative;
	}
	
	.cart {
		position: absolute;
		right: 10rpx;
		bottom: 10rpx;
		width: 40rpx;
		height: 40rpx;
	}
	
	.ts_item {
		float: left;
		border-radius: 10rpx;
		width: calc(33.2% - 11rpx);
		background: #fff;
	
		&:nth-last-child(2) {
			margin: 0 15rpx;
		}
	}
	
	.ts_img {
		padding-right: 20rpx;
	}
	
	.ts_cont {
		padding: 20rpx;
	}
	
	.ts_item .ts_tit {
		font-size: 32rpx;
		margin-bottom: 10rpx;
	}
	
	.ts_item .ts_tm {
		font-size: 28rpx;
		color: #999;
		margin-bottom: 10rpx;
	}
	
	.ts_can {
		height: auto !important;
		overflow: hidden;
	}
	
	.estateMes {
		font-size: 24rpx;
		font-weight: 400;
		color: #333333;
		margin: 5rpx 0;
	}
	
	.estatePirce {
		font-size: 24rpx;
		font-weight: 400;
		color: #c64843;
		margin-bottom: 12rpx;
	}
	
	// 客服弹框
	.pouchat {
		position: fixed;
		background: rgba(0, 0, 0, 0.5);
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 9999;
	
		.poucont {
			position: absolute;
			top: 30%;
			left: 15%;
			right: 15%;
	
			.icon-close {
				width: 80rpx;
				height: 80rpx;
				font-size: 70rpx;
				color: #fff;
				line-height: 80rpx;
				text-align: center;
				margin: 30rpx auto;
			}
		}
	
		.chatlist {
			background: #fff;
			padding: 30rpx;
			border-radius: 10rpx;
		}
	
		.chatml {
			position: relative;
			padding: 20rpx;
			padding-left: 100rpx;
			min-height: 120rpx;
	
			.cell-service {
				position: absolute;
				right: 0;
				bottom: 0;
				left: 0;
				top: 0;
				opacity: 0;
				z-index: 10;
	
				.cell--bubble {
					width: 100%;
				}
			}
	
			text {
				display: block;
				line-height: 40rpx;
			}
	
			.t1 {
				font-size: 32rpx;
			}
	
			.t2 {
				font-size: 24rpx;
				color: #999;
			}
	
			image {
				width: 70rpx;
				height: 70rpx;
				position: absolute;
				left: 15rpx;
				top: 25rpx;
			}
		}
	}
	
	.two_i_rCan {
		display: flex;
		margin-top: 20rpx;
		// padding: 0 17rpx;
		height:auto;
	
		.sideBar_left {
			width: 50%;
			height: 320rpx;
		}
	
		.sideBar_r {
			width: 50%;
			height: 320rpx;
	
			.two-items {
				display: block;
			}
		}
	
	}
	
.livePlay {
		// margin-top: 24rpx;
		// margin-left: 32rpx;
        .titlelive{
			font-size: 32rpx;
			color: #333;
			padding: 24rpx 30rpx;
		}
		.livePlayView {
			overflow: hidden;

			.livePlayMain {
				// white-space: nowrap;
				overflow-x: auto;
				display: flex;
				// align-items: flex-start;
				padding-bottom: 14rpx;
				padding-left: 32rpx;

				.livePlayItem {
					margin-right: 24rpx;
					display: inline-block;

					border-radius: 8rpx;

					box-shadow: 0rpx 0rpx 20rpx rgba(0, 0, 0, 0.06);

					.livePlaybg {
						width: 240rpx;
						height: 180rpx;
						border-radius: 8rpx 8rpx 0 0;
						position: relative;
						overflow: hidden;
						// padding: 42rpx 24rpx 0 24rpx;
					}

					.tips {
						position: absolute;
						top: 16rpx;
						left: 0;

						.tips_icon {
							width: 100rpx;
							height: 38rpx;
							background: #C3AB7C;
							display: flex;
							align-items: center;
							justify-content: center;
							background: url(https://cos.ryz1620.com/liankun/static/tips.png) no-repeat;
							background-size: 100% 100%;
							margin-left: -10rpx;

							text {
								font-size: 20rpx;
								font-weight: 400;
								color: #FFFFFF;
								margin-left: 4rpx;
							}
						}
					}

					.Main_view {
						padding: 18rpx 24rpx;
						font-size: 24rpx;
						color: #333333;

						.Main_title {
							margin-bottom: 8rpx;
							// display: inline;
							// word-wrap: break-word; 
							// word-break: break-all; 
						}

						text {
							font-size: 16rpx;
							font-weight: 400;
							line-height: 36rpx;
							color: #0D1019;
							margin-left: 4rpx;
						}
					}

				}

				.i_tBtns {
					width: 102rpx;
					height: 102rpx;
					background: rgba(0, 0, 0, .4);
					border-radius: 50%;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					z-index: 2;
				}

				.i_tbImgs {
					width: 42rpx;
					height: 42rpx;
					margin: 20rpx auto 0;
				}

				.i_tbTxts {
					width: 100%;
					height: 34rpx;
					line-height: 34rpx;
					text-align: center;
					color: #fff;
					font-size: 24rpx;
					position: absolute;
					top: 58rpx;
					left: 0;
				}

				.last_item {
					background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(195, 171, 124, 0.38) 100%);
					height: 287rpx;
					width: 84rpx;
					display: flex;
					align-items: center;
					flex-direction: column;
					justify-content: center;
					cursor: pointer;

					.last_item_view {
						width: 84rpx;
						display: flex;
						align-items: center;
						flex-direction: column;
						justify-content: center;

						.look_more {
							writing-mode: vertical-lr;
							text-align: center;
							font-size: 28rpx;
							font-weight: 400;
							color: #333333;
						}
					}
				}
			}
		}
	}	
.live {
		padding: 0 32rpx;
		margin-top:24rpx;
		box-sizing: border-box;
		.liveView {
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			flex-wrap: wrap;
			.liveItem {
				background: #fff;
				border-radius: 12rpx;
				overflow: hidden;
				box-shadow: 0rpx 3rpx 18rpx 0rpx rgba(206, 202, 198, 0.2);
				width:100%;
				margin-bottom: 20rpx;
				.livePic {
					height: 440rpx;
					border-radius: 10rpx 10rpx 0rpx 0rpx;
					overflow: hidden;
					position: relative;
					.liveLook {
						position: absolute;
						top: 20rpx;
						right: 16rpx;
						display: flex;
						align-items: center;
						background: rgba(0, 0, 0, 0.4);
						box-shadow: 0rpx 3rpx 18rpx 0rpx rgba(206, 202, 198, 0.2);
						border-radius: 24rpx;
						padding-right: 16rpx;
						.liveLookIcon {
							width: 44rpx;
							height: 44rpx;
							overflow: hidden;
						}
						.liveLookText {
							font-size: 20rpx;
							font-weight: 500;
							color: #ffffff;
							margin-left: 10rpx;
						}
					}
					.liveStatus {
						position: absolute;
						bottom: 20rpx;
						right: 20rpx;
						display: flex;
						align-items: center;
						background: rgba(0, 0, 0, 0.4);
						padding: 4rpx 10rpx;
						border-radius: 24rpx;
						.liveColor {
							width: 10rpx;
							height: 10rpx;
							border-radius: 50%;
							margin-right: 10rpx;
						}
						.liveStatusText {
							font-size: 24rpx;
							font-weight: bold;
							color: rgba(254, 254, 254, 0.8);
						}
					}
				}
				.liveTitle {
					padding: 28rpx 21rpx;
					border-radius: 10rpx 10rpx 0rpx 0rpx;
					margin-top: -10rpx;
					background: #fff;
					font-size: 26rpx;
					font-weight: 500;
					position: relative;
					color: #242424;
				}
			}
		}
	}
.livetext{
	position: absolute;
	left: 16rpx;
	top:20rpx;
	display: flex;
	image{
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
	}
	.elText{
		margin-left: 15rpx;
		color: #fff;
		.tcv1{
			font-size: 30rpx;
			overflow: hidden;
			    text-overflow: ellipsis;
			    display: -webkit-box;
			    -webkit-line-clamp: 1;
			    -webkit-box-orient: vertical;
		}
		.tcv2{
			font-size: 22rpx;
			color: #f1f1f1;
			margin-top: 5rpx;
			overflow: hidden;
			    text-overflow: ellipsis;
			    display: -webkit-box;
			    -webkit-line-clamp: 1;
			    -webkit-box-orient: vertical;
		}
	}
}
	.stime{
		margin: 32rpx;
		background: #FFF5E8;
		padding: 32rpx 10rpx;
		border-radius: 15rpx;
		.stime-title{
			font-size: 32rpx;
			font-weight: bold;
			color: #000;
			padding: 0 20rpx;
			.i_toIcon{
				font-size: 24rpx;
				font-weight: normal;
				color: #999;
				float: right;
			}
		}
		.stime-list{
			display: flex;
			margin-top: 15rpx;
			.nlist{
				width: 33.3%;
				padding: 12rpx;
				image{
					width: 100%;
					border-radius: 10rpx;
				}
			}
			.stimetitle{
				overflow: hidden;
				    text-overflow: ellipsis;
				    display: -webkit-box;
				    -webkit-line-clamp: 1;
				    -webkit-box-orient: vertical;
					font-size: 24rpx;
					line-height: 60rpx;
			}
			.stimeprice{
				display: flex;
				font-size: 18rpx;
				line-height: 40rpx;
				background: #FFEED5;
				border-radius: 40rpx;
				.st1{
					flex: 1;
					    background: #E2B576;
					    border-radius: 40rpx;
					    width: 100rpx;
					    text-align: center;
						color: #fff;
				}
				.st2{
					flex: 1;
					    text-align: center;
						text-decoration:line-through;
						color: #E2B576;
				}
			}
		}
	}
.topimgs{
	display: flex;
	padding: 20rpx;
	padding-bottom: 0;
	.im1{
		width: 33.3%;
		padding: 12rpx;
		image{
			width: 100%;
		}
	}
}	
</style>
